<template>
  <div>
    <div class="detailInfo">
      <div class="sonsulttig">
        <p>{{topcontent}}</p>
      </div>
      <div class="first" @click="tofirstdetail(contentdata.id)">
        <div  class="detailTile">
          <span class="nav">{{contentdata.odata}}--</span>
          <span> {{contentdata.title}}</span>
        </div>
        <p>{{contentdata.content}}</p>
      </div>
      <div class="cu-chat">
        <div class="cu-item" :class="item.from_type===0?'self':''" v-for="item of detailList" :key="item.id">
          <div class="cu-avatar radius" v-if="item.from_type===0?false:true">
            <img src="../../assets/images/userimg.png" />
          </div>
          <div class="main">
            <div class="content shadow" :class="item.from_type===0?' bg-cyan':''">
              <p>{{item.content}}</p>
            </div>
          </div>
          <div class="cu-avatar radius" v-if="item.from_type===0?true:false">
            <img :src="item.himg" />
          </div>
          <div class="date">{{item.addtime}}</div>
        </div>
      </div>
    </div>

    <div class="cu-bar foootinput input" >
      <div class="message">
        <input  focus="true" bindconfirm="bindconfirm" adjust-position="true" placeholder="请输入留言内容" />
      </div>
      <button class="cu-btn bg-green shadow" bindtap="tosend">发送</button>
    </div>
  </div>
</template>

<script>
import { getdetail } from '@/api/consult'
export default {
  name: 'consultDetail',
  data () {
    return {
      topcontent: '请用10-500字详细描述您的问题，专家将根据你的问题进行详细解答',
      contentdata: {},
      detailList: []
    }
  },
  created () {
    console.log(this.$route.params)
    const id = this.$route.params.id
    getdetail(id).then(res => {
      console.log(res)
      this.contentdata = res.content
      this.detailList = res.data
    })
  }
}
</script>

<style scoped>
  .detailInfo{
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
  }
  .sonsulttig{
    width: 100%;
    background: rgba(227, 180, 19, 0.5);
    padding: .1rem 0;
    color: #000;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99
  }
  .sonsulttig p{
    padding: .1rem .2rem;
    font-size: .22rem
  }
  .cu-chat{
    height: 7.8rem;
    overflow: hidden;
    overflow-y: scroll;
    flex: 1;
    margin-bottom: 1rem;
    background: #f5f5f5;
  }
  .cu-chat .cu-item>.main .content::before {
    content: "";
    top: .3rem;
    transform: rotate(45deg);
    position: absolute;
    z-index: -1;
    display: inline-block;
    overflow: hidden;
    width: .24rem;
    height: .24rem;
    left: -12rem;
    right: initial;
    background-color: inherit;
    filter: blur(5rpx);
    opacity: 0.3;

  }
  .cu-chat .cu-item.self>.main .content::before {
    left: auto;
    right: -.12rem;

  }

  button.cu-btn{
    width: 1.5rem !important;
    background: royalblue;
    border-radius: .1rem;
    color: #fff;
    padding: .2rem;
  }
  .radius{
    background: none;
  }
  .radius img{
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
  }
  .messagebtns{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: .2rem
  }
  .messagebtns img{
    width: .4rem;
    height: .4rem;
    margin-left: .2rem
  }
  .messagebtns p{
    color: #888;
    font-size: .24rem;
    margin-left: .2rem
  }
  .message{
    width: 100%;
    padding: 2% .2rem;
    position: relative
  }
  .message p{
    width: 96%;
    padding: 0 2%;
    height: 1.5rem
  }
  .first{
    width: 90%;
    margin: .3rem auto;
    background: #fff;
    border-radius: .1rem;
    margin-top: .6rem;
    padding: .2rem;
    border-bottom: 1px solid #ccc;
  }
  .first span{
    padding: 0 .2rem;
    display: block;
    font-size: .3rem
  }
  .first span{
    font-size: .24rem;
    color: #999;
    padding: .1rem .2rem;
    display: block
  }
  .detailTile{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .detailTile span{
    /* margin-right: 10rpx; */
    padding: .2rem 0;
  }
  .detailTile span.nav{
    color: #999;
  }
  .foootinput{
    position: fixed;
    bottom: 0px;
    background: #ffffff;
    width: 100%;
    border-top: 1px solid #f5f5f5;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .cu-avatar img{
    width: .8rem;
    height: .8rem;
    border-radius: .5rem;
  }
  .cu-item{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: .2rem .2rem .5rem .2rem;
  }
  .self{
    justify-content: flex-end;
  }
  .self .date{
    text-align: right;
  }
  .cu-item .date{
    position: absolute;
    font-size: .24rem;
    color: var(--grey);
    width: calc(100% - 3.2rem);
    bottom: .2rem;
    left: 1.6rem;

  }
  .content{
    margin: 0 .2rem;
    background: #1cbbb4;
    border-radius: .2rem;
    padding: .2rem .4rem;
    margin-bottom: .2rem;
  }
</style>
